﻿@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_TabLayoutIndex.cshtml";
}

<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">系统管理</a>
        <a href="">菜单管理</a>
        <a>
            <cite>菜单管理</cite>
        </a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-col-space12">
                    <div class="layui-inline layui-show-xs-block">
                        <input type="text" name="key" placeholder="名称/编号" autocomplete="off" class="layui-input searchVal">
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn search_btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>
            </div>
            <div class="layui-card-header">
                <button class="layui-btn layui-btn-normal" onclick="btn_add()"><i class="layui-icon">&#xe61f;</i>添加</button>
            </div>
            <div class="layui-card-body">
                <table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
            </div>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>修改</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="add_sub"><i class="layui-icon">&#xe642;</i>添加子栏目</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>
@section Scripts{
    <script>
        layui.config({ base: '/lib/extends/' }).extend({ treetable: 'treetable-lay/treetable' }).use(['table', 'treetable'], function ()
        {
            var $ = layui.jquery;
            var table = layui.table;
            var treetable = layui.treetable;

            // 渲染表格
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: "0",
                treeIdName: 'Id',
                treePidName: 'ParentId',
                elem: '#auth-table',
                url: '/Menu/GetData',
                page: false,
                id: "listTable",
                cols: [[
                    { type: 'numbers', width: 60, title: '编号' },
                    { field: 'FullName', width: 300, title: '权限名称' },
                    { field: 'ActionUrl', title: '菜单url' },
                    {
                        field: 'isMenu', width: 80, align: 'center', templet: function (d)
                        {
                            if (d.isMenu == 1) {
                                return '<span class="layui-badge layui-bg-gray">按钮</span>';
                            }
                            if (d.parentId == -1) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';
                            } else {
                                return '<span class="layui-badge-rim">菜单</span>';
                            }
                        }, title: '类型'
                    }
                ]],
                done: function ()
                {
                    layer.closeAll('loading');
                }
            });
            //搜索
            $(".search_btn").on("click", function ()
            {
                table.reload("listTable", {
                    url: "/Menu/GetData",
                    where: {
                        key: $(".searchVal").val()  //搜索的关键字
                    }
                });
            });

            table.on('tool(auth-table)', function (obj)
            {
                var layEvent = obj.event,
                    data = obj.data;
                if (layEvent === 'edit') { //编辑
                    alert(data.id);
                } else if (layEvent === 'del') { //删除
                }
            });

        });
    </script>
}